{% extends "base.html" %}

{% block title %}Home - Flask Templates Demo{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <h2>Welcome to the Flask Templates Demo</h2>
        <p>This demo showcases the templating features covered in Chapter 3.</p>

        <h3>Topics Covered:</h3>
        <ul>
            <li>Template inheritance with <code>{% raw %}{% extends %}{% endraw %}</code> and <code>{% raw %}{% block %}{% endraw %}</code></li>
            <li>Variable interpolation with <code>{{ variable }}</code></li>
            <li>Control structures (<code>{% raw %}{% if %}{% endraw %}</code>, <code>{% raw %}{% for %}{% endraw %}</code>)</li>
            <li>Template filters</li>
            <li>Custom macros</li>
            <li>Context processors</li>
            <li>Flash messages</li>
            <li>Static file inclusion</li>
        </ul>

        <h3>Navigation</h3>
        <p>Use the navigation bar above to explore different template features:</p>
        <ul>
            <li><strong>Watchlist</strong> - Simple template example</li>
            <li><strong>Watchlist Pro</strong> - Template with static files</li>
            <li><strong>Movie List</strong> - Demonstrates loops and data display</li>
            <li><strong>Control Structures</strong> - Shows conditionals and loops</li>
            <li><strong>Filters & Macros</strong> - Displays custom filters and reusable macros</li>
            <li><strong>Simple Macros</strong> - Basic macro examples</li>
            <li><strong>Context Processors</strong> - Shows globally available data</li>
            <li><strong>Flash Messages</strong> - Demonstrates temporary messaging</li>
        </ul>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Debug Information</h5>
            </div>
            <div class="card-body">
                <p><strong>Request Method:</strong> {{ request.method }}</p>
                <p><strong>Request Path:</strong> {{ request.path }}</p>
                <p><strong>Template Context:</strong></p>
                <ul>
                    <li>user: {{ user.username if user else 'None' }}</li>
                    <li>movies count: {{ movies|length if movies else 0 }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}